<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>攻略详情页</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        /* 主要内容 */
        .content>h1 {
            text-align: center;
        }

        .content>img {
            width: 500px;
            height: 250px;
            position: relative;
            left: 50%;
            margin-left: -250px;
            margin-top: 50px;
        }

        .content>p {
            width: 500px;
            height: 100px;
            position: relative;
            left: 50%;
            margin-left: -250px;
            margin-top: 50px;
        }

        .content>span {
            display: block;
            position: relative;
            left: 50%;
        }

        .contain>textarea {
            width: 500px;
            height: 100px;
            /* 固定文本域 */
            resize: none;
            text-align: justify;
            position: relative;
            left: 50%;
            margin-left: -250px;
            margin-top: 50px;
            border: 1px solid black;
        }

        .contain>button {
            display: block;
            position: relative;
            left: 80%;
        }

        .count {
           
            position: relative;
            left: 30%;
        }
        .count>.icon-zan{
            margin-left: 50px;
        }
    </style>
    <link rel="stylesheet" href="./font/iconfont.css">

</head>
    <!-- 详情页 -->
<body>
    <nav>
        <img src='./img2/basic-logo-dark.png' alt="">
            <ul class="leftUl">
                <li><a href="index.html">首页</a></li>
                <li><a href='javascript:;'>跟团</a></li>
                <li><a href='javascript:;'>自由行</a></li>
                <li><a href='javascript:;'>邮轮</a></li>
                <li><a href='javascript:;'>机票</a></li>
                <li><a href='hotal.html'>酒店</a></li>
                <li><a href='raiders.html'>攻略</a></li>
                <li><a href='publish.html'>发布攻略</a></li>
            </ul>
        <ul class="rightUl">
            <li class="out"><a href="javascript:;">退出</a></li>
            <li class="resgist" style="width: 150px;color: red;"><a href="./login.html">登录</a></li>
        </ul>
    </nav>

    <div class="contain">
        <div class="content">
            <!-- js渲染数据 -->
        </div>
        <!-- 点赞/踩 -->
        <div class="count">
            <!-- 赞 -->
            <span class="iconfont icon-zan1" style="font-size: 30px;"></span>
            <!-- 踩 -->
            <span class="iconfont icon-zan" style="font-size: 30px;"></span>

        </div>
        <!-- 评论框 -->
        <textarea cols="30" rows="10"></textarea>
        <button>登录后发布评论</button>
    </div>

</body>

</html>
<script src="./js/common.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/detail.js" ></script>
<script src="./layui/layui.js"></script>